<template>
    <el-card class="box-card">
        <!-- 搜索栏 -->
        <div class="search-bar">
            <span class="username-label">用户名：</span>
            <el-input v-model="searchQuery" placeholder="请输入用户名" style="width: 200px" clearable
                @clear="handleSearchClear" @keyup.enter="handleSearch">
                <template #append>
                    <el-button :icon="Search" @click="handleSearch" />
                </template>
            </el-input>

            <el-button class="top_btn" type="primary" @click="handleAdd">新增管理</el-button>
        </div>

        <!-- 学生表格 -->
        <el-table :data="filteredStudents" border style="width: 100%" v-loading="loading">
            <el-table-column prop="id" label="ID" align="center" width="80" />
            <el-table-column prop="userName" label="用户名" align="center" width="120" />
            <el-table-column prop="realName" label="真实姓名" align="center" width="120" />

            <el-table-column prop="sex" label="性别" width="80" align="center">
                <template #default="scope">
                    {{ scope.row.sex === null ? '无' : scope.row.sex == '1' ? '男' : '女' }}
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="手机号" width="120" align="center" />
            <el-table-column prop="createTime" label="创建时间" width="180" align="center" />

            <el-table-column prop="status" label="状态" width="180" align="center">
                <template #default="scope">
                    <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
                        {{ scope.row.status === 1 ? '启用' : '禁用' }}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" align="center">
                <template #default="scope">
                    <el-button size="small" :type="scope.row.status === 1 ? 'warning' : 'success'" plain
                        @click="handleToggleStatus(scope.row)">
                        {{ scope.row.status === 1 ? '禁用' : '启用' }}
                    </el-button>
                    <el-button size="small" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" plain @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 50]" :small="false" :background="true"
                layout="total, sizes, prev, pager, next, jumper" :total="totalAdmin" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </el-card>


</template>

<script>
</script>

<style scoped>
.box-card {
    box-shadow: none !important;
    border: none !important;
}

.username-label {
    font-family: 'Microsoft YaHei', sans-serif;
    font-size: 16px;
    color: #333;
    font-weight: 600;
    letter-spacing: 1px;
}

.student-container {
    padding: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-bar {
    margin-bottom: 20px;
}

.top_btn {
    margin-left: 10px;
}

.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>
